<template>
  <div>
    <!--    <header-mock-up />-->
    <div style="height: 45px;"></div>
    <el-row>
      <el-col :span="4" />
      <el-col :span="14">
        <table class="home_table">
          <el-select
            id="home-search"
            v-model="search"
            multiple
            clearable
            filterable
            class="home-search"
            style="width: 100%"
            remote
            reserve-keyword
            placeholder="Sequence Search"
            :loading="loading"
          >
            <el-option
              v-for="item in searchLInfoList"
              :key="item.key"
              :label="item.content"
              :value="item.value"
            >
            <!--            <span style="font-size: 15px">{{ item.content }}</span>-->
            </el-option>
          </el-select>
          <el-button
            class="ma-0 home-search-btn"
            x-large
            color="#104caa"
            style="color: #032f70; height: 49px; border-radius: 0;"
            @click="goTargetSearch(search)"
          >
            <img :src="require('../assets/img/search.png')" />
          </el-button>
        </table>
        <div style="height: 53px"></div>
      </el-col>
      <el-col :span="4" />
    </el-row>
    <el-row>
      <el-col :span="4" />
      <el-col :span="14">
        <table class="tag_table">
          <img :src="require('../assets/img/icon06.png')" alt="" style="height: 17px;margin-right: 10px" />
          <div
            v-for="item in searchList"
            :key="item.key"
            style=" margin-right: 10px;"
          >
            <a style="font-size: 15px;font-weight: 500;color: #005aff;cursor: pointer;" @click="goTargetSearch([item.content])">{{ item.content }}</a>
          </div>
        </table>
      </el-col>
    </el-row>
    <div style="height: 45px"></div>
    <el-row>
      <el-col v-for="(item, index) in carImgList" :key="index" :span="8" style="text-align: center;padding: 2% 6% 6% 6%;width: 62%;">
        <el-card
          style=""
          :body-style="{ padding: '0px' }"
        >
          <a style="cursor: pointer;">
            <img
              :src="item.imgUrl"
              class="image"
              @click="goUrl(item.toUrl)"
            />
          </a>
          <div style="padding: 14px">
            <span style="font-weight: 700; font-size: 17px;">{{ item.title }}</span>
            <div class="bottom">
              <li class="time">{{ item.text }}</li>
              <li class="time">{{ item.text }}</li>
              <li class="time">{{ item.text }}</li>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
// import HeaderMockUp from "../components/HeaderMockUp.vue";
import router from "@/router";

export default{
  name: "Home",
  components: {
    // CharSunburst: () => import("@c/CharSunburst.vue"),
    // CharSunburst01: () => import("@c/CharSunburst01.vue"),
    // HeaderMockUp
  },
  setup() {
    // interface IexploringList {
    //   name?: string;
    //   icon: string;
    //   backButton?: string;
    //   hoverButton?: string;
    //   defButton?: string;
    //   count?: string;
    // }
    const searchList = ref([
      {
        key: "NFE2",
        content: "RV-CDI-p001",
      },
    {
        key: "ARMC2",
        content: "RV-CDI-p002",
      },
    {
        key: "BMT2",
        content: "RV-CDI-p003",
      },
    ]);
    const carImgList = ref([
      {
        imgUrl: require("../assets/img/img1.jpg"),
        title: "Sequence Design",
        text: "the description of Sequence Design",
        toUrl: "/sequenceDesign"
      },
      {
        imgUrl: require("../assets/img/img2.jpg"),
        title: "Sequence Registration",
        text: "the description of Sequence Registration",
        toUrl: "/requestManagement"
      },
      {
        imgUrl: require("../assets/img/img3.jpg"),
        title: "Component Import",
        text: "the description of Sequence Import",
        toUrl: "/sequenceImport"
      },
    ]);
    const goUrl = (val) => {
      router.push(val);
    };
    const goTargetSearch = (val) => {
      router.push({
        name: "RequestManagement",
        params: {
          gene: val
        }
      });
    };
    const searchLInfoList = ref([
      {
        content: "RV-CDI-p001",
        value: "NFE2"
      },
      {
        content: "RV-CDI-p002",
        value: "ARMC2"
      },
      {
        content: "RV-CDI-p003",
        value: "BMT2"
      },
      {
        content: "RV-CDI-p004",
        value: "PRKDC"
      }
    ]);

    return {
      searchList,
      carImgList,
      searchLInfoList,
      goUrl,
      goTargetSearch,
    };
  },
  data () {
    return {
      search: []
    };
  },
};
</script>
<style scoped lang="scss">
.home_table {
  width: 65%;
  height: 53px;
  border: 2px solid #104caa;
  display: flex;
  position: absolute;
}
.tag_table {
  width: 65%;
  margin-top: 10px;
  display: flex;
  position: absolute;
}
  .image {
    margin-top: 8px;
    width: 95%;
  }
</style>
<style>
#home-search.el-input__inner {
  font-size: 18px;
  height: 49px;
  border: 0;
  line-height: 45px;
  background-color: #ffffff78;
  box-shadow: 0 0 0 0px var(--el-select-input-focus-border-color) inset!important;
  border-radius: 0;
}
.el-select #home-search.el-input__inner {
  cursor: text;
}
.home-search .el-select-dropdown__item {
  height: 36px;
  line-height: 36px;
}
.home-search-btn.v-btn:not(.v-btn--depressed):not(.v-btn--flat) {
  box-shadow: 0 0 0;
}
</style>
